<template>
  <div class="number-input-comp">
    <input class="current-input" ref="inputComp" :maxlength='maxlength' :placeholder='placeholder' type="text" :value="value" @input="changeNum" @change="normalizeNum" />
  </div>
</template>

<script>
export default {
  props: {
    value: {},
    placeholder: '',
    maxlength: {
      type: String | Number,
      default: 'auto',
    },
  },
  methods: {
    changeNum(e) {
      let keycode = e.data
      let value = e.target.value
      // if (keycode == null) {
      //   this.setValue(value)
      //   return
      // }
      if (/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(keycode)) {
        this.$refs.inputComp.value = this.value
        this.setValue(value)
        return
      } else {
        let v = this.value.replace(/\s+/g, '')
        this.setValue(v)
        this.$refs.inputComp.value = v
      }

      // if (/[0-9]/.test(keycode)) {
      //   this.setValue(value)
      //   return
      // }

      // if (/[\u4e00-\u9fa5]/.test(keycode)) {
      //   this.setValue(value)
      //   return
      // }
      // if (/[a-zA-Z]/.test(keycode) && keycode) {
      //   this.setValue(value)
      //   return
      // }
      // if (keycode === '.') {
      //   let pointMatch = value.match(/\./g)
      //   if (pointMatch && pointMatch.length > 1) {
      //     this.$refs.inputComp.value = this.value
      //     return
      //   }
      //   this.setValue(value)
      //   return
      // }
      // this.$refs.inputComp.value = this.value
    },
    setValue(value) {
      this.$emit('input', value)
    },
    normalizeNum(e) {
      let value = e.target.value.replace(/\s+/g, '')
      if (value.indexOf('.') == 0) {
        this.setValue('0' + this.value)
        return
      }
      if (value.lastIndexOf('.') == value.length - 1) {
        this.setValue(this.value.substring(0, value.length - 1))
      }
    },
  },
}
</script>

<style lang="less" scoped>
.number-input-comp {
  .current-input {
    width: 100%;
    box-sizing: border-box;
    height: 98px;
    opacity: 1;
    background: #f1f9fc;
    border: 1px solid #41bef4;
    border-radius: 4px;
    font-weight: 700;
    text-align: left;
    color: #333333;
    font-size: 28px;
    padding-left: 36px;
  }
}
</style>
